import React, { Component } from 'react'
import style from "./want.module.scss"
import {back_icon,certificate_icon} from '../../common/icon/svg'
const img = require("../../common/image/me/椭圆 1.png");

import { Tabs, Badge } from "antd-mobile";

import {request} from "../../serverAPI/index";

export default class Want extends Component {
    state={
        userinfo:{uid:""},
        tabs:[
            {title:<span className={style["nav-title"]}>在售商品</span>,list:[]},
            {title:<span className={style["nav-title"]}>下架商品</span>,list:[]},
        ],
    }

    getMefavorites(){
        let temp = localStorage.getItem("userList");
        if(!temp) return alert("请先登录");

        let userinfo = JSON.parse(temp);
        request({
            url:"/getMefavorites?uid="+userinfo.uid,
            method:"GET",
        }).then(res=>{
                if(res.data.code==="01"){
                    let favoriteList = res.data.data;
                    let {tabs} = this.state;
                    favoriteList.forEach((book)=>{
                        if(book.inventory > 0) tabs[0].list.push(book);
                        else tabs[1].list.push(book);
                    });

                    this.setState({tabs});
                }else if(res.data.code==="04"){
                    alert("数据获取失败")
                }
        },err=>{
            console.log(err);
        })
    }

    componentDidMount(){
        this.getMefavorites()
    }

    render() {
        let {tabs} = this.state;
        let tabContents = tabs.map((tab,index)=>{
            return (
                <div key={index} className={style["booklist-box"]}>{
                    tab.list.map(book=>
                        <div key={book.bid} className={style["buy-item"]}>
                            <img src={"/apis/"+book.cover}></img>
                            <div className={style["buy-msg"]}>
                                <div className={style["buy-top"]}>
                                    <span className={style["buy-name"]}>{book.name}</span>
                                    {book.getSelf?<span className={style["buy-succes"]}>支持自提</span>:null}
                                </div>
                                <p>{book.description}</p>
                                <div className={style["buy-center"]}>
                                    <span className={style["buy-degree"]}>{book.grade}成新</span>
                                    <span className={style["buy-city"]}>{book.address.split(",")[0]}</span>
                                </div>
                                <div className={style["buy-footer"]}>
                                    <div>
                                        <span className={style["buy-min"]}>￥</span>
                                        <span className={style["buy-new"]}>{book.price}</span>
                                        <span className={style["buy-old"]}>￥{book.origin_price}</span>
                                        <span>存量：{book.inventory}</span>
                                    </div>
                                    <div>
                                        {book.inventory>0?<span className={style.evaluate}>马上买</span>:<span className={style.ewew}>已下架</span>}
                                    </div>
                                </div>

                            </div>
                        </div>    
                    )
                }</div>
            )
        })

        return (
            <div className={style.want}>
                <div className={style.head}>
                    <span onClick={()=>this.props.history.push("/me")}>{back_icon}</span>
                    <span className={style.shou}>我的收藏</span>
                </div>
            <Tabs tabs={tabs}
                initialPage={0}
                onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
            >
                {tabContents}
            </Tabs>

            </div>
        )
    }
}
